<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS层叠演练(Cascading Style Sheets Cascading drill)</title>
  <!-- 
    CSS的层叠样式表（Cascading Style Sheets）中的“cascading”指的是样式的层叠性，即多个样式规则作用于同一个元素时，根据其特定的规则和权重来确定最终的样式。
    以下是一些关于CSS层叠性的说明： 
 
      1. 样式优先级：CSS样式表中的样式规则根据其特定的优先级来确定应用顺序，通常是内联样式 > ID选择器 > 类选择器 > 元素选择器。 
      2. 继承与层叠：样式可以通过继承从父元素传递给子元素，也可以通过层叠来叠加不同样式规则的效果。 
      3. 选择器权重：当多个样式规则应用于同一元素时，根据选择器的权重来确定最终生效的样式。 
      4. !important规则：通过使用!important规则可以提高样式规则的优先级，确保其生效。 
   -->
   <style>
      /* 内部样式 */
      #box1 {
        color: blue;
      }

      .box {
        color: green;
      }

      .cascading {
        color: black;
      }

      .one {
        color: orange;
      }

      .two {
        color: purple;
      }
   </style>
</head>
<body>

  <div id="box1" class="box" style="color: red;">这是一个div元素</div>

  <div class="cascading one two">
    CSS的层叠样式表（Cascading Style Sheets）中的“cascading”指的是样式的层叠性，即多个样式规则作用于同一个元素时，根据其特定的规则和权重来确定最终的样式。
  </div>
  
</body>
</html>